<template>
  <view>
    <view
      v-if="show"
      :class="
        checkitem.checkresult == 1 || checkitem.iisDef == 1 ? 'check' : 'check2'
      "
      @click="clickHandler"
    >
      <text v-if="checkitem.iisEdit != 1"
        >{{ index + 1 }} 、 {{ workstandard }}</text
      >
      <view class="flextext" v-else>
        <view>{{ index + 1 }}、</view>
        <textarea
          v-model="workstandard"
          :maxlength="-1"
          @blur="otherHandler"
          style="height: 150rpx"
        />
      </view>
    </view>
    <!-- <view
      v-if="show && index == checklength"
      :class="checkitem.checkresult == 1 ? 'check' : 'check2'"
      @click="clickHandler2"
    >
      <view>
        <text>{{ index + 1 }} 、 {{ checkitem.workstandard }}</text>
      </view>
      <input v-model="workstandard" :maxlength="-1" @change="otherHandler" />
    </view> -->
  </view>
</template>

<script>
export default {
  props: {
    index: {},
    item: {},
    checklength: {},
    disabled: {
      defult: false,
    },
  },

  data() {
    return {
      checkitem: {},
      show: true,
      workstandard: "",
    };
  },
  created() {
    this.init();
  },
  mounted() {},
  methods: {
    init() {
      this.checkitem = this.item;
      this.workstandard = this.checkitem.workstandard;
      if (this.checkitem.iisDef == 1) {
        this.checkitem.checkresult = 1;
        this.clickHandler();
      }
    },
    clickHandler() {
      if (this.disabled) {
        return;
      }
      if (this.checkitem.iisVali == 1 && this.checkitem.iisEdit == 2) {
        return;
      }
      this.show = false;
      if (this.checkitem.checkresult == 1 && this.checkitem.iisVali != 1) {
        this.checkitem.checkresult = 2;
      } else {
        this.checkitem.checkresult = 1;
      }
      this.$emit(
        "selectCheck",
        this.checkitem.checkresult,
        this.workstandard,
        this.index
      );
      this.show = true;
    },
    clickHandler2() {
      if (this.disabled) {
        return;
      }
      this.show = false;
      if (this.checkitem.checkresult == 1) {
        this.checkitem.checkresult = 2;
      } else {
        this.checkitem.checkresult = 1;
      }
      this.$emit("selectCheck", this.checkitem.checkresult, this.index);
      this.show = true;
    },
    otherHandler() {
      this.$emit(
        "selectOther",
        this.checkitem.checkresult,
        this.index,
        this.workstandard
      );
      this.show = true;
    },
  },
};
</script>

<style scoped>
.check,
.check2 {
  color: #51b4f9;
  border: 1px solid #51b4f9;
  padding: 15rpx;
  margin-top: 35rpx;
  border-radius: 15rpx;
}
.check2 {
  color: #333;
  border: 1px solid #ccc;
}
input {
  height: 5vh;
}
.flextext {
  display: flex;
}
</style>